<template>
  <div style="width: 100%; height: 100%">
    <div class="until_title">项目概况</div>
    <p class="info-title t-center">{{projectDetail.projectTitle}}</p>
    <table class="info-table mt10">
      <tr>
        <th class="t-right" width="15%">结构形式:</th>
        <td colspan="2" class="t-left" width="85%">{{projectDetail.projectStructureType || '暂无'}}</td>
      </tr>
      <tr>
        <th class="t-right">工期:</th>
        <td colspan="2">{{projectDetail.difference}}天</td>
      </tr>
      <tr>
        <th class="t-right">楼栋数:</th>
        <td colspan="2">{{projectDetail.buildingNum}}栋</td>
      </tr>
      <tr>
        <th>占地面积:</th>
        <td colspan="2">{{projectDetail.stageArea}}㎡</td>
      </tr>

      <tr>
        <th colspan="3" class="t-left">
          <span class="th">建筑面积（地上/地下）:</span>
          <span
            class="td ellipsis inline v-top"
            :title="`${projectDetail.area}㎡（${projectDetail.upArea || 0}/${projectDetail.underArea || 0}㎡）`"
            style="width: 250px">{{projectDetail.area}}㎡（{{projectDetail.upArea || 0}}/{{projectDetail.underArea || 0}}㎡）</span>
        </th>
      </tr>
      <tr>
        <th>项目地址:</th>
        <td colspan="2">{{projectDetail.address}}</td>
      </tr>
      <tr>
        <th>建设单位:</th>
        <td colspan="2">{{projectDetail.developmentOrganization}}</td>
      </tr>
      <tr>
        <th>设计单位:</th>
        <td colspan="2">{{projectDetail.designOrganization || '暂无'}}</td>
      </tr>
      <tr>
        <th>监理单位:</th>
        <td colspan="2">
          <zz-marquee
            v-if="isSupervisionNameMarquee"
            :marginRight=50
            color="#a8c5ed"
            fontSize="14px"
            :contentList="SupervisionNameList"
            :isStack = false
            style="height: 27px"
            width="335px"></zz-marquee>
          <div v-else  style="width: 336px; overflow: hidden;white-space: nowrap;">
            <span ref="SupervisionName">{{projectDetail.supervisionName || '暂无'}}</span>
          </div>
        </td>
      </tr>
      <tr>
        <th>施工单位:</th>
        <td colspan="2">
          <zz-marquee
            v-if="isConstructionNameMarquee"
            :marginRight=50
            color="#a8c5ed"
            fontSize="14px"
            :contentList="constructionNameList"
            :isStack = false
            style="height: 27px"
            width="335px"></zz-marquee>
          <div v-else style="width: 336px; overflow: hidden;white-space: nowrap;">
            <span ref="constructionName">{{projectDetail.constructionName || '暂无'}}</span>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'info',
    data () {
      return {
        isSupervisionNameMarquee: false,
        isConstructionNameMarquee: false,
        SupervisionNameList: [],
        constructionNameList: [],
        projectDetail: {},
        stageId: ''
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    mounted () {
      this.findStageId().then(() => {
        this.getProjectInfo()
      })
    },
    watch: {
      '$route' (to, from) {
        if (to.name === 'AIvideo') {
          this.findStageId().then(() => {
            this.getProjectInfo()
          })
        }
      }
    },
    methods: {
      findStageId () {
        return new Promise(resolve => {
          const data = {
            projectId: this.$route.query.pjId
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/screen/getCurrentStageList`,
            data: this.$qs.stringify(data)
          }).then(res => {
            if (res.data.errorMsg || res.data.data.length === 0) {
              this.$message.error('获取分期出错')
            } else {
              this.stageId = res.data.data[0].stageId
              resolve()
            }
          })
        })
      },
      getProjectInfo () {
        const data = {
          'stageId': this.stageId,
          'pjId': this.$route.query.pjId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getProjectInfo`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.projectDetail = res.data.data
          this.isSupervisionNameMarquee = false
          this.isConstructionNameMarquee = false
          this.$nextTick(() => {
            this.initSupervision()
            this.initConstructionName()
          })
        })
      },
      initSupervision () {
        if (this.projectDetail.supervisionName) {
          let rect = this.$refs.SupervisionName.getBoundingClientRect()
          if (rect.width > 335) {
            this.SupervisionNameList.push(`${this.projectDetail.supervisionName}`)
            this.SupervisionNameList.push(`${this.projectDetail.supervisionName}`)
            this.isSupervisionNameMarquee = true
          } else {
            this.isSupervisionNameMarquee = false
          }
        }
      },
      initConstructionName () {
        if (this.projectDetail.constructionName) {
          let rect = this.$refs.constructionName.getBoundingClientRect()
          if (rect.width > 335) {
            this.constructionNameList.push(`${this.projectDetail.constructionName}`)
            this.constructionNameList.push(`${this.projectDetail.constructionName}`)
            this.isConstructionNameMarquee = true
          } else {
            this.isConstructionNameMarquee = false
          }
        }
      }
    }
  }
</script>

<style scoped lang='scss'>
  $titleColor: #34cddd;
   .info-title{
     margin-top: -8px;
     font-size: 18px;
     font-weight: bold;
   }
  .info-table{
    width: 100%;
    tr{
      line-height: 31px;
    }
    th{
      color: $titleColor;
      font-weight: normal;
    }
    td{
      font-weight: bold;
      padding-left: 5px;
    }
    .th{
      color: $titleColor;
      font-weight: normal;
    }
    .td{
      color: #a8c5ed;
      font-weight: bold;
      padding-left: 5px;
    }
  }
  .info-color{
    color: $titleColor;
  }
</style>
